<template>
	<view class="tabs">
		<!--  -->
		<view :class="showCate?'cate_opt':'is_none'">
			<view class="cate_wrap">
				<view class="cate_item"
				@click="changeCate(null, '全部')"
				>
					全部
				</view>
				<view 
				v-for="cate in cateList" 
				:key="cate.id" 
				@click="changeCate(cate.id, cate.name)"
				class="cate_item">
					{{ cate.name }}
				</view>
			</view>
		</view>
		<view class="tab-content">
			<view @click="changeSort(0)" :class="sortType==0?'tab tab-active':'tab'">
				<view class="text">
					{{ cateText }}
				</view>
				
			</view>
			<view @click="changeSort(1)" :class="sortType==1?'tab tab-active':'tab'">
				<view class="text">
					销量
				</view>
				
			</view>
			<view  @click="changeSort(2)" :class="sortType==2?'tab tab-active':'tab'" >
				<view class="text">
					阅读量
				</view>
				
			</view>
			<view @click="changeSort(3)" :class="sortType==3?'tab tab-active':'tab'" >
				<view class="text">
					价格
				</view>
				<view  class="img">
					<image v-show="priceSort==1" src="../../../static/icon/up.png" mode="heightFix"></image>
				    <image v-show="priceSort==2" src="../../../static/icon/down.png" mode="heightFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			cateList:{
				type:Array,
				default:()=>[]
			}
		},
		data() {
			return {
				sortType:1,
				priceSort:1, // 价格排序规则 0 无 1 正序 up  2 倒序 down
				showCate:false,
				categoryId:null,
				cateText:"分类"
			}
		},
		methods: {
			// 
			changeCate(id,name){
				this.categoryId = id;
				this.cateText = name;
				this.showCate = !this.showCate;
				// 组件通讯
				this.$emit("bar", this.sortType, this.priceSort, id);
			},
			
			/**
			 * 修改排序
			 * @param {Object} type 排序规则 0,1,2
			 */
			changeSort(type){
				// 
				switch (type){
					case 0:
						this.sortType = 0;
						this.showCate = !this.showCate;
						return;
					case 1:
						this.sortType = 1;
						break;
					case 2:
					    this.sortType = 2;
					    break;
					case 3:
						this.sortType = 3;
						if( this.priceSort==2||this.priceSort==0 ){
							this.priceSort  = 1;
						}else{
							this.priceSort  = 2;
						}
						break;
					default:
						break;
				}
				this.showCate = false;
				// 组件通讯
				this.$emit("bar", this.sortType, this.priceSort, this.categoryId);
			}
			
		}
	}
</script>

<style lang="less" scoped >
  .tabs{
	  padding: 15rpx 60rpx;
	  padding-bottom: 0;
	  background-color: #ffffff;
	
	.tab-content{
		height: 80rpx;
		position: relative;
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid  #ebecd3;;
		
		.tab{
			width: 120rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			align-content: center;
			
			
			.text{
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				font-weight: 600;
				color: #7b7f79;
			}
			
			.img{
				padding: 15rpc;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 40rpx;
				width: 32rpx;
				image{
					height: 48rpx;
					width: 32rpx;
				}
			}
		}
		
		.tab-active{
			border-bottom: 2px solid #5ca45b;
			
			.text{
				color: #5ca45b;
			}
		}
		
		
		
	}
	
	.cate_opt{
		position: relative;
		// display: none;
		z-index: 1000;
		.cate_wrap{
			position: absolute;
			top: 90rpx;
			left: -15rpx;
			background-color: #ffffff;
			display: flex;
			flex-direction: column;
			
			.cate_item{
				width: 180rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-bottom: #e4eadf 1rpx solid;
			}
		}
	}
	.is_none{
		display: none;
	}
  }
  
  
</style>
